<template>
	<div class="user-info-container">
		<!-- 顶部背景区域 -->
		<div class="top-container">
			<div class="user-title">个人中心</div>
			<div class="user-card">
				<div class="user-info">
					<div class="user-name">{{ userInfo.userName || '游客' }}</div>
					<div class="user-phone">{{ userInfo.phonenumber || '***********' }}</div>
				</div>
			</div>
		</div>

		<!-- 企业信息卡片 -->
		<div class="cp-card" :class="userInfo.omDepts?.id ? 'pb10' : 'pb20'">
			<div class="cp-info-item">
				<div class="info-icon info-icon-cp"></div>
				<div class="info-text">{{ userInfo.omDepts?.pollutionSourceName || '*****' }}</div>
			</div>
			<div class="cp-info-item">
				<div class="info-icon info-icon-address"></div>
				<div class="info-text">
					{{ userInfo.omDepts?.address || '*****' }}
				</div>
			</div>
		</div>

		<!-- 功能菜单卡片 -->
		<div class="cp-menu-card" :class="userInfo.omDepts?.id ? 'company-height' : 'gov-height'" v-if="userInfo.userId">
			<div class="cp-menu-info">
				<div class="cp-menu-info-item pt35" @click="gotoUserInfoPage">
					<div class="info-icon-menu info-icon-user-info"></div>
					<div class="info-text-menu">
						个人信息
						<van-icon class="more" color="#888D99" size="20" name="arrow" />
					</div>
				</div>

				<div class="cp-menu-info-item pt40" @click="gotoCompanyInfoPage" v-if="userInfo.omDepts?.id">
					<div class="info-icon-menu info-icon-cp-user"></div>
					<div class="info-text-menu">
						企业基本信息
						<van-icon class="more" color="#888D99" size="20" name="arrow" />
					</div>
				</div>

				<div class="cp-menu-info-item pt40" @click="gotoCompanyInfoPageUnbound" v-if="userInfo.omDepts?.id">
					<div class="info-icon-menu info-icon-unbind"></div>
					<div class="info-text-menu">
						企业信息解绑
						<van-icon class="more" color="#888D99" size="20" name="arrow" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { ref, onMounted, onActivated } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore, useCacheStore } from '../../stores'
import { showToast } from 'vant'

export default {
	name: 'UserInfo',
	setup() {
		const router = useRouter()
		const userStore = useUserStore()
		const cacheStore = useCacheStore()

		const userInfo = ref({})

		// 初始化数据
		const initData = async () => {
			try {
				// 优先从 userStore 获取用户信息（最可靠的数据源）
				if (userStore.userInfo && Object.keys(userStore.userInfo).length > 0) {
					console.log('从 userStore 获取用户信息:', userStore.userInfo)
					userInfo.value = userStore.userInfo
					return
				}

				// 其次从缓存获取
				const cachedUserInfo = cacheStore.getCachedDataWithExpiry('userInfo')
				if (cachedUserInfo) {
					console.log('从缓存获取用户信息:', cachedUserInfo)
					userInfo.value = cachedUserInfo
					return
				}

				// 如果都没有，尝试确保登录
				if (userStore.isAuthenticated) {
					console.log('用户已认证，尝试获取用户信息')
					try {
						const loginRes = await userStore.ensureLogin()
						if (loginRes) {
							userInfo.value = loginRes
							return
						}
					} catch (error) {
						console.error('ensureLogin 失败:', error)
					}
				}

				// 最后降级：显示空白状态（而不是模拟数据）
				console.warn('无法获取用户信息，显示空白状态')
				userInfo.value = {
					userName: '游客',
					phonenumber: '***********',
					omDepts: {
						id: '1',
						pollutionSourceName: '*****',
						address: '*****',
					},
				}
			} catch (error) {
				console.error('获取用户信息失败', error)
				showToast('获取用户信息失败')
			}
		}

		// 跳转到个人信息详情页
		const gotoUserInfoPage = () => {
			// 跳转到我们迁移后的 H5 个人详情页面
			router.push('/user-detail')
		}

		// 跳转到企业信息页
		const gotoCompanyInfoPage = () => {
			// showToast('企业基本信息功能开发中')
			router.push('/company/info')
		}

		// 跳转到企业解绑页
		const gotoCompanyInfoPageUnbound = () => {
			// showToast("企业信息解绑功能开发中");
			router.push('/company/unbound')
		}

		onMounted(() => {
			console.log('用户页面 onMounted')
			initData()
		})

		// 页面激活时刷新（从首页切换过来时）
		onActivated(() => {
			console.log('用户页面 onActivated，刷新用户信息')
			// 每次激活时都重新加载，确保数据是最新的
			initData()
		})

		return {
			userInfo,
			gotoUserInfoPage,
			gotoCompanyInfoPage,
			gotoCompanyInfoPageUnbound,
		}
	},
}
</script>

<style lang="less" scoped>
.user-info-container {
	min-height: 100vh;
	background-color: #f7f7f7;
}

.top-container {
	width: 100%;
	height: 232px;
	background: url('https://wx.ksepia.com/profile/mini-image/user_info_bgx3.png') no-repeat;
	background-size: 100% 100%;
	position: relative;

	.user-title {
		color: #fcfdff;
		font-size: 20px;
		font-weight: 600;
		text-align: center;
		padding: 45px 0 0 0;
	}
}

.user-card {
	position: relative;
}

.user-info {
	position: absolute;
	left: 15px;
	top: 20px;

	.user-name {
		color: #f6f6f6;
		font-size: 20px;
		font-weight: 600;
	}

	.user-phone {
		color: #a2b5fa;
		font-size: 14px;
		font-weight: 600;
		margin: 12px 0 0 0;
	}
}

.cp-card {
	height: 90px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: rgba(0, 103, 255, 0.1) 0 3px 6px;
	font-size: 14px;
	color: #202739;
	position: relative;
	top: 187px;
	margin: -230px 16px 0;
	z-index: 99;

	.cp-info-item {
		padding: 16.5px 30px 0 30px;
		position: relative;
	}

	&.pb10 {
		padding: 0 0 10px 0;
	}

	&.pb20 {
		padding: 0 0 20px 0;
	}
}

.cp-menu-card {
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	font-size: 16px;
	color: #202739;
	position: absolute;
	width: calc(100% - 32px);
	top: 233px;
	margin: 0 16px;

	.cp-menu-info {
		position: absolute;
		top: 45px;
		width: 100%;
	}

	&.company-height {
		height: 240px;
	}

	&.gov-height {
		height: 128px;
	}
}

.cp-menu-info-item {
	width: 100%;
	position: relative;
	cursor: pointer;

	&:active {
		background-color: #f8f8f8;
	}

	&.pt35 {
		padding-top: 35px;
	}

	&.pt40 {
		padding-top: 40px;
	}
}

.info-text-menu {
	padding: 0 0 0 55px;
	height: 15.75px;
	margin: -3px 0 0 0;

	.more {
		float: right;
		margin: 0 10px 0 0;
	}
}

.info-icon-menu {
	width: 18px;
	height: 15.75px;
	position: absolute;
	left: 26px;
}

.info-icon {
	width: 14px;
	height: 14px;
	position: absolute;
	left: 26px;
}

.info-text {
	padding: 0 0 0 30px;
}

// 图标样式
.info-icon-address {
	background: url('https://wx.ksepia.com/profile/mini-image/address-@3x.png');
	background-size: 100%;
}

.info-icon-cp {
	background: url('https://wx.ksepia.com/profile/mini-image/cp@3x.png');
	background-size: 100%;
}

.info-icon-user-info {
	background: url('https://wx.ksepia.com/profile/mini-image/user-info@3.png');
	background-size: 100%;
}

.info-icon-cp-user {
	background: url('https://wx.ksepia.com/profile/mini-image/cp-user@3.png');
	background-size: 100%;
}

.info-icon-unbind {
	background: url('https://wx.ksepia.com/profile/mini-image/unbind.png');
	background-size: 100%;
}
</style>
